/*
 * @Author: hongbin
 * @Date: 2022-03-27 23:47:48
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-05 10:27:18
 * @Description:
 */
import { FC, Fragment, ReactElement } from "react";
import styled from "styled-components";
import { ContainerStyled, ElementList } from "./ElementList";

interface IProps {
  type: number;
}

const ElementProvider: FC<IProps> = ({ type }): ReactElement => {
  return (
    <Container>
      {ElementList[type].map((element) => {
        const Component = element.tag;
        return (
          <Fragment key={element.name}>
            <h4>{element.name}</h4>
            <Box>
              <Component
                draggable="true"
                onDragStart={(e) => {
                  const { offsetTop, offsetLeft } = e.target as HTMLElement;
                  //计算鼠标距离拖拽元素左上角距离
                  const disX = e.pageX - offsetLeft;
                  const disY = e.pageY - offsetTop;
                  e.dataTransfer.setData("TYPE", type + "");
                  e.dataTransfer.setData("NAME", element.name);
                  e.dataTransfer.setData("DISX", disX + "");
                  e.dataTransfer.setData("DISY", disY + "");
                }}
              />
            </Box>
          </Fragment>
        );
      })}
    </Container>
  );
};

export default ElementProvider;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0 0.3vw;
  user-select: none;
  font-size: 1vw;
`;

const Box = styled.div`
  border-radius: 0.3vw;
  padding: 0.4vw;
  margin: 0.4vw 0 1vw 0;
  /* box-shadow: inset 4px 4px 1vw 1px #cbbfa8; */
  box-shadow: inset 3px 3px 0.7vw 0px #cbbfa8, inset -5px -4px 0.7vw 0px #eae7e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #fff;
  & > * {
    cursor: grab;
    :active {
      cursor: grabbing;
    }
  }

  :hover {
    /* background-color: #eee; */
    /* border-color: #666; */
    box-shadow: 0 0 1vw 1px #ccc;
  }

  & > img {
    width: 6vw;
    height: 6vw;
  }

  ${ContainerStyled} {
    width: 90%;
    height: 9vh;
  }
`;
